{% extends '@SyliusUi/Form/theme.html.twig' %}

{% block collection_widget -%}
    {% from 'SyliusResourceBundle:Macros:notification.html.twig' import error %}
    {% import _self as self %}
    {% set attr = attr|merge({'class': attr.class|default ~ ' controls collection-widget'}) %}

    {% spaceless %}
        <div data-form-type="collection" {{ block('widget_container_attributes') }}
                {% if prototype is defined and allow_add %}
                    data-prototype='{{ self.collection_item(prototype, allow_delete, button_delete_label, '__name__')|e }}'
                {%- endif -%}
        >
            {{ error(form.vars.errors) }}

            {% if prototypes|default is iterable %}
                {% for key, subPrototype in prototypes %}
                    <input type="hidden" data-form-prototype="{{ key }}" value="{{ self.collection_item(subPrototype, allow_delete, button_delete_label, '__name__')|e }}" />
                {% endfor %}
            {% endif %}

            <div data-form-collection="list" class="ui three column stackable grid">
                {% for child in form %}
                    {{ self.collection_item(child, allow_delete, button_delete_label, loop.index0) }}
                {% endfor %}
            </div>

            {% if prototype is defined and allow_add %}
                <a href="#" class="ui labeled icon button" data-form-collection="add">
                    <i class="plus square outline icon"></i>
                    {{ button_add_label|trans }}
                </a>
            {% endif %}
        </div>
    {% endspaceless %}
{%- endblock collection_widget %}

{% macro collection_item(form, allow_delete, button_delete_label, index) %}
    {% spaceless %}
        <div data-form-collection="item" data-form-collection-index="{{ index }}" class="column">
            {{ form_widget(form) }}
            {% if allow_delete %}
                <a href="#" data-form-collection="delete" class="ui red labeled icon button" style="margin-bottom: 1em;">
                    <i class="trash icon"></i>
                    {{ button_delete_label|trans }}
                </a>
            {% endif %}
        </div>
    {% endspaceless %}
{% endmacro %}

{% block sylius_product_image_widget %}
    {% spaceless %}
    <div class="ui upload box segment">
        {{ form_row(form.type) }}
        <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
    {% if form.vars.value.path|default(null) is not null %}
        <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
    {% endif %}
        <div class="ui hidden element">
            {{ form_widget(form.file) }}
        </div>
        <div class="ui element">
            {{- form_errors(form.file) -}}
        </div>
    {% if product.id is not null and 0 != product.variants|length and not product.simple %}
        {{ form_row(form.productVariants) }}
    {% endif %}
    </div>
    {% endspaceless %}
{% endblock %}

{% block sylius_taxon_image_widget %}
    {% spaceless %}
    <div class="ui upload box segment">
        {{ form_row(form.type) }}
        {% if form.vars.value.path|default(null) is null %}
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
        {% else %}
            <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.change_file'|trans }}</label>
        {% endif %}
        <div class="ui hidden element">
            {{ form_widget(form.file) }}
        </div>
        <div class="ui element">
            {{- form_errors(form.file) -}}
        </div>
    </div>
    {% endspaceless %}
{% endblock %}
